import QtQuick 1.1
import StarMenu 1.0

Item {
    property alias rep: repeater
    property alias tag: modelList.tags

    XmlListModel {
        id: modelList
        property string tags

        function commasep(x)
        {
            return x.replace(' ',',');
        }

        query: "/rss/channel/item"
        namespaceDeclarations: "declare namespace media=\"http://search.yahoo.com/mrss/\";"

        XmlRole { name: "title"; query: "title/string()" }
        XmlRole { name: "url"; query: "media:content/@url/string()" }

        onTagsChanged: {
            if (tags !== "")
                source = "http://api.flickr.com/services/feeds/photos_public.gne?"+(tags ? "tags="+commasep(tags)+"&" : "")+"format=rss2"
        }

        onStatusChanged: {
            if (status === XmlListModel.Null) {
                console.log("status === XmlListModel.Null");
            }

            if (status === XmlListModel.Ready && count>0) {
                console.log("status === XmlListModel.Ready", count);
                repeater.model = modelList;
                starMenu.open=true;
//                starMenu.updateStarItemPos();
            }

            if (status === XmlListModel.Loading) {
                console.log("status === XmlListModel.Loading");
//                starMenu.open=false;
            }

            if (status === XmlListModel.Error) {
                console.log("status === XmlListModel.Error", errorString());
            }
        }
    }


    StarMenu {
        id: starMenu
        property int itemsW: main.width/10
        property int itemsH: itemsW*1.33

        anchors.fill: parent
        visible: open // this prevent menu to be opened by a click. It is opened when modelList is ready
        visualParent: main
        color: Qt.rgba(0,0,0, 0.8)
        center.x: main.width>>1
        center.y: main.height>>1
        starCenterVisible: false
        delayChangePos: 60
        shape: StarMenu.ShapeGrid
        columns: 8
        spacingH: 10
        spacingV: 25
        radiusH: (main.width - itemsW)>>1
        radiusV: (main.height - itemsH)>>1
        startingRadius: itemsH

        onStarMenuOpening: {
            textRect.text =
                    "<font size=4>StarItems can be created dynamically using data fetched for example by querying Flickr.";
        }

        StarItem {
            width: 130; height: 35
            objectName: "CHANGESHAPE"
            Behavior on x { NumberAnimation { duration: 2000; easing.type: Easing.OutQuint } }
            Behavior on y { NumberAnimation { duration: 2000; easing.type: Easing.OutQuint } }
            Behavior on opacity { NumberAnimation { duration: 2000; easing.type: Easing.OutQuint } }
            Rectangle {
                anchors.fill: parent
                Text {
                    id: name
                    anchors.centerIn: parent
                    text: "change shape"
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter
                }
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        if (starMenu.shape === StarMenu.ShapeCircle ) { starMenu.itemsW=main.width/10; starMenu.shape = StarMenu.ShapeGrid; }
                        else if (starMenu.shape === StarMenu.ShapeGrid)    { starMenu.itemsW=main.width/18; starMenu.shape = StarMenu.ShapeSpiral; }
                        else if (starMenu.shape === StarMenu.ShapeSpiral)  { starMenu.itemsW=main.width/18; starMenu.shape = StarMenu.ShapeCircle; }
                    }
                }
            }
        }

        Repeater {
            id: repeater

            delegate: StarItem {
                width:  starMenu.itemsW
                height: starMenu.itemsH
                zoomHoverValue: 1.3
                objectName: index


                Behavior on x { NumberAnimation { duration: 2000; easing.type: Easing.OutQuint } }
                Behavior on y { NumberAnimation { duration: 2000; easing.type: Easing.OutQuint } }
                Behavior on scale { NumberAnimation { duration: 1000; easing.type: Easing.OutQuint } }
                Behavior on opacity { NumberAnimation { duration: 2000; easing.type: Easing.OutQuint } }
                Rectangle {
                    anchors.fill: parent
                    color: "#490202"
                    clip: true
                    Image {
                        anchors.top: parent.top
                        width: starMenu.itemsW; height: starMenu.itemsH-parent.height/4
                        fillMode: Image.PreserveAspectFit
                        source: url
                        opacity: 0
                        onStatusChanged: if (status==Image.Ready) opacity = 1
                        Behavior on opacity { NumberAnimation { duration: 5000; easing.type: Easing.OutQuint } }
                    }
                    Text {
                        color: "#ffffff"
                        anchors.bottom: parent.bottom
                        x: parent.x + 3
                        width: starMenu.itemsW-6
                        height: parent.height/4
                        font.pixelSize: 12
                        text: title
                        style: Text.Raised
                        wrapMode: Text.WrapAnywhere
                    }

                    // Menu to pop up when user click on an image
                    StarMenu {
                        id: starMenu2
                        anchors.fill: parent
                        visualParent: main
                        parentVisible: true
                        radiusH: 110
                        radiusV: 90
                        startingAngle: 15

                        Repeater {
                            id: starItemRepeater
                            model: 7

                            delegate: StarItem {
                                width: 120; height: 20
                                Behavior on opacity  { NumberAnimation { duration: 500; easing.type: Easing.OutBounce } }

                                SMbutton {
                                    anchors.fill: parent
                                    text: {
                                        if (index === 0) return "Open";
                                        if (index === 1) return "Twitter share";
                                        if (index === 2) return "FB share";
                                        if (index === 3) return "G+ share";
                                        if (index === 4) return "thumbs up share";
                                        if (index === 5) return "download";
                                        if (index === 6) return "browse to";
                                        return "";
                                    }
                                }
                            }
                        } // starItemRepeater
                    } // starMenu2
                }


            } // StarItem
        } // Repeater


    }

}
